<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE客户端示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #messageBox {
            border: 1px solid #ccc;
            padding: 10px;
            height: 300px;
            overflow-y: auto;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        .message {
            margin: 5px 0;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
        .timestamp {
            color: #666;
            font-size: 0.8em;
        }
        .status {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 4px;
        }
        .connected {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .disconnected {
            background-color: #f2dede;
            color: #a94442;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>SSE客户端示例</h1>
    <div id="connectionStatus" class="status">未连接</div>
    <div id="messageBox"></div>
    <div>
        <button onclick="connect()">连接</button>
        <button onclick="disconnect()">断开连接</button>
        <button onclick="clearMessages()">清空消息</button>
    </div>

    <script>
        let eventSource = null;
        const messageBox = document.getElementById('messageBox');
        const statusDiv = document.getElementById('connectionStatus');

        function connect() {
            if (eventSource) {
                console.log('已经连接，无需重复连接');
                return;
            }

            try {
                // 创建 EventSource 实例
                eventSource = new EventSource('http://localhost:8080/events');

                // 连接成功时的处理
                eventSource.onopen = function() {
                    updateStatus('已连接', true);
                    addMessage('系统', '连接成功');
                };

                // 接收消息的处理
                eventSource.onmessage = function(event) {
                    addMessage('服务器', event.data);
                };

                // 错误处理
                eventSource.onerror = function(error) {
                    console.error('SSE错误:', error);
                    updateStatus('连接错误', false);
                    disconnect();
                };

            } catch (error) {
                console.error('连接失败:', error);
                updateStatus('连接失败', false);
            }
        }

        function disconnect() {
            if (eventSource) {
                eventSource.close();
                eventSource = null;
                updateStatus('已断开连接', false);
                addMessage('系统', '连接已断开');
            }
        }

        function updateStatus(message, connected) {
            statusDiv.textContent = message;
            statusDiv.className = 'status ' + (connected ? 'connected' : 'disconnected');
        }

        function addMessage(sender, content) {
            const timestamp = new Date().toLocaleTimeString();
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message';
            messageDiv.innerHTML = `
                <span class="timestamp">[${timestamp}]</span>
                <strong>${sender}:</strong> ${content}
            `;
            messageBox.appendChild(messageDiv);
            messageBox.scrollTop = messageBox.scrollHeight;
        }

        function clearMessages() {
            messageBox.innerHTML = '';
        }

        // 页面关闭时自动断开连接
        window.onbeforeunload = function() {
            disconnect();
        };
    </script>
</body>
</html> 